<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@include file="/public/base.jspf"%>
<!DOCTYPE html>
<html>
<head>
	<title>服务器日志</title>
	<%@include file="/public/base_css.jspf"%>
	<%@include file="/public/base_js.jspf"%>
	<style>
		html{
			background: #333;
		}
		body{
			background: #333;
			color: #aaa;
			padding: 10px;
			width: 98%;
			font-size: 14px;
		}
	</style>
</head>
<body id="log-container">
	<div></div>
</body>
<script>
	var websocket = null;
	var url = "ws://123.207.72.82:80/mybatis-test/webLog";
	$(function(){
		openWebSocket();

		//监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。  
	    window.onbeforeunload = function(){
			websocket.close();
		}
		//监听标签页关闭事件
	    $('#my-tabs').tabs({
	    	onBeforeClose: function(title,index){
	    		if(title=='服务器实时日志' && websocket!=null){
	    			websocket.close();
	    		}
	    	}
	    });
	});

	//打开websocket链接
	function openWebSocket(){
		if(websocket==null){
			// 指定websocket路径
			websocket = new WebSocket(url);
			websocket.onmessage = function(event) {
				// 接收服务端的实时日志并添加到HTML页面中
				$("body div").append(event.data);
				// 滚动条滚动到最低部
				$("body").scrollTop($("body div").height() - $("body").height());
			};
			//连接关闭的回调方法  
		    websocket.onclose = function(){
		    	//$.messager.alert('WebSocket','链接已关闭');
		    	console.log('WebSocket链接已关闭');
		    }
		}else{
			$.messager.alert('WebSocke','已经链接上');
		}
	}
	//关闭连接  
	function closeWebSocket(){
		websocket.close();
		websocket = null;
	}
</script>
</html>